<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/lang/zh-cn/zh-cn.js"> </script>
    <style type="text/css">
        .layui-upload-img{
            /*width: 100px;*/
        }
    </style>
</head>
<body style="padding:15px;">
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input type="number" name="order_num" lay-verify="required" placeholder="越大越靠前" autocomplete="off" step="0.01" class="layui-input" value="{$vo.order_num}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品标题</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入商品标题" class="layui-input" value="{$vo.name}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属分类</label>
        <div class="layui-input-block">
            <select id="shop_id" name="type_id" style="height: 100%">
                <option value="" <if condition="$vo['type_id'] == ''">selected</if>>请选择分类</option>
                <foreach name="news_cate" item="list">
                    <option value="{$list.id}" <if condition="$vo['type_id'] == $list['id'] && $vo['type_id'] != ''">selected</if>>{$list.name}</option>
                </foreach>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品图片</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-danger" id="test1"><i class="layui-icon"></i>上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img layui-nav-img" id="demo1" src="{$vo.img}" style="width: 60px; height: 60px;<if condition="!$vo['img']">display: none;</if>">
                    <p id="demoText"></p>
                </div>
            </div>
            <input type="hidden" id="pics" name="img" value="{$vo.img}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品原价</label>
        <div class="layui-input-block">
            <input type="text" name="old_price" lay-verify="title" autocomplete="off" placeholder="请输入商品原价" class="layui-input" value="{$vo.old_price}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">每人兑换次数</label>
        <div class="layui-input-block">
            <input type="number" name="chance" lay-verify="required" placeholder="每人兑换次数" autocomplete="off" step="0.01" class="layui-input" value="{$vo.chance}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">每天兑换次数</label>
        <div class="layui-input-block">
            <input type="number" name="chanceday" lay-verify="required" placeholder="每天兑换次数" autocomplete="off" step="0.01" class="layui-input" value="{$vo.chanceday}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">消耗积分</label>
        <div class="layui-input-block">
            <input type="number" name="rate1" lay-verify="required" placeholder="消耗积分" autocomplete="off" step="0.01" class="layui-input" value="{$vo.rate1}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">消耗金额</label>
        <div class="layui-input-block">
            <input type="number" name="rate2" lay-verify="required" placeholder="消耗金额(元)" autocomplete="off" step="0.01" class="layui-input" value="{$vo.rate2}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品详情</label>
        <div style="width: 100%;">
        <textarea  id="editor" type="text/plain" style="width:800px;height:400px; position: relative; left: 12%;">
            {:htmlspecialchars_decode($vo['content'])}
        </textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">库存</label>
        <div class="layui-input-block">
            <input type="number" name="stock" lay-verify="required" placeholder="库存数" autocomplete="off" step="0.01" class="layui-input" value="{$vo.stock}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">活动状态</label>
        <div class="layui-input-block">
            <input type="radio" name="is_stop" value="0" title="开启" <if condition="$vo['is_stop'] eq 0">checked</if>>
            <input type="radio" name="is_stop" value="1" title="暂停" <if condition="$vo['is_stop'] eq 1">checked</if>>
        </div>
    </div>
    <input type="hidden" name="id" value="{$vo['id']}">
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="*">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<div id="search-item" style="position:fixed;width: 62%;background-color: #eee;z-index:50;top: 50%;left: 20.3%;">

</div>

<script id="pic" type="text/html">
    {{#  layui.each(d.pics, function(index, item){ }}
    <img class="layui-upload-img delpicsitemn{{index}}" src="{{ item }}" style="margin-left: 10px;width: 100px; height: 100px;">
    {{#  }); }}
</script>
<script src="__PUBLIC__/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var ue = UE.getEditor('editor',{
        toolbars: [
            ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'simpleupload', 'insertimage', 'emotion', 'scrawl','attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                'print', 'preview', 'searchreplace', 'drafts', 'help']
        ],
    });
    var pics = [{$vo.pics_arr}];

    var layuiThat;
    layui.use(['form','upload', 'layedit', 'laytpl'], function(){
        var form = layui.form
                ,layer = layui.layer
                ,$ = layui.jquery
                ,upload = layui.upload
                ,layedit = layui.layedit
                ,laytpl = layui.laytpl;

        var getTpl = pic.innerHTML
                ,view = document.getElementById('view');
        $('#goods').blur(function(e){
            var keyword = $(this).val();
            var box =$('#search-item');
            $.ajax({
                type:"GET",
                url:"{:U('search')}?keyword="+keyword,
                dataType:"json",
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                success:function(res){
                    $.each(res,function(k,v){
                        console.log(v.title);
                        var l =" <div style='padding: 3% 3%;border-bottom: 1px solid #eee'>&nbsp;&nbsp;&nbsp;" +
                                '<image src="'+ v.img_url+'" style="width:50px;height:50px;"></image>'    +
                                '<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+ v.title+'</span>'+
                                '<button class="layui-btn" style="float: right;margin:7px 10px 0 0;" onclick="sthis('+ v.id+ ',\'' + v.title +'\')">选择</button>'+
                                '</div>';
                        $('#search-item').append(l)
                    })
                }
            })
        })
        layuiThat = $;
        layedit.set({
            uploadImage: {
                url: '{:U("Home/Public/upload1")}'
            }
        });
        var contIdx = layedit.build("content", {
            tool: ["strong","italic","underline","del","|","left","center","right","|","face","image"]
        });

        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '{:U("Home/Public/upload")}'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result).show(); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.err_code > 0){
                    return layer.msg('上传失败');
                }else{

                    pics[0] = "https://www.58zltc.com/Uploads/"+res.file_name;

                    $("#pics").val("https://www.58zltc.com/Uploads/"+res.file_name);
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //监听提交
        form.on('submit(*)', function(data){
            var picsVal = $('#pics').val();
            var post_data = data.field;
            post_data.content = getContent();
            if (picsVal != '') {
                $.post('#', post_data, function(e) {
                    layer.alert(e.info,function(index){
                        if(e.status == 1){
                            parent.location.reload();
                        }else{
                            layer.close(index);
                        }
                    });
                });
            } else {
                layer.alert('缩略图不能为空!')
            }
            return false;
        });
        laytpl(getTpl).render({pics:pics}, function(html){
            view.innerHTML = html;
        });
        function getContent() {
            var arr = [];
            arr.push(UE.getEditor('editor').getContent());
            return arr.join("\n");
        }

//  $('.delpicsitem').click(function () {
//    var indexn = $(this).data('idx');
//    $('.delpicsitemn' + indexn).remove();
//    pics.splice(indexn, 1);
//    $("#pics").val(pics.join(','));
//  })

    });

    //删除图片
    function delPicsItem (index) {
        layuiThat('.delpicsitemn' + index).remove();
        pics.splice(index, 1);
        console.log(pics.join(','));
        layuiThat("#pics").val(pics.join(','));
    }

</script>
<script>
    function sthis(id,title){
        document.getElementById('search-item').style.display="none";
        var goodsid = document.getElementById('goodsid')
        goodsid.value=id;
        document.getElementById('goods').value= title;
    }
</script>
</body>
</html>